// 引入模块 gulp核心工具
const gulp = require("gulp");
//浏览器热更新
//cnpm i browser-sync -D
const browser_sync = require('browser-sync').create();
//sass编译
const sass = require('gulp-sass');
//cnpm i gulp-sass -D

//美化css
const autoprefixer=require('gulp-autoprefixer');

//压缩css
const cleanCss =require('gulp-clean-css');

//JS降级
const babel = require('gulp-babel');

//cnpm  i  gulp-babel@7   babel-core   babel-preset-env  -D






//cnpm i gulp-sass browser-sync gulp-babel gulp-clean-css gulp-autopredfixer -D

/******任务********/
// gulp.task(任务名，回调函数)
// 在命令行中  输入  gulp test 
gulp.task("test",function(){
		console.log("test gulp")
		//gulp.src()表示引入文件的方法
		//pipe()表示完成后下一步要执行的函数
		//gulp.dest()文件输出到对应的目录下
		gulp.src("./src/index.html").pipe(gulp.dest("./dist/"));
})


/*
 * 浏览器热更新任务
 */
gulp.task("browser",function(){
	browser_sync.init({
		server:{
			// 打开的根目录
			baseDir:"./"
		},
		port:4000	
	})
	//监听html改动，并刷新浏览器
	gulp.watch("./index.html").on("change",browser_sync.reload);
	//监听scss文件的变化，并且执行sass任务
	gulp.watch("./scss/*.scss",["sass"]).on("change",browser_sync.reload)
})


/*
 * 编译 sass任务
 */
gulp.task("sass",function(){
	gulp.src('./scss/*.scss')
	.pipe(sass())
	.pipe(autoprefixer({
		browsers:['last 2 versions','Android >=4.0','iOS 7','last 3 Safari versions'],
		cascade:true
	}))
	.pipe(gulp.dest('./css/'))
})



// 压缩css
gulp.task("minify_css",function(){
	gulp.src('./src/css/**/*.css')
	.pipe(cleanCss({
		//类型：Boolean 默认: true [是否开启高级优化 (合并选择器等)]
		advanced:false,
		//保留ie7及以下兼容写法  类型：String  默认：'or'*' [启用兼容模式; 'ie7':IE7兼容模式，'ie8':IE8兼容模式， '*':IE10+兼容模式]
		compatibility:'ie7',
		//类型：Boolean  默认：false[是否保留换行]
		keepBreaks:true,
		//保留所有特殊前缀  当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
		keepSpscialComments:'*'
		
	}))
	.pipe(gulp.dest("./dist/css/"))
})





gulp.task("minify_js",function(){
	gulp.src('./src/js/**/*.js')
	.pipe(babel())
	.pipe(gulp.dest('./dist/js/'))
})
